<!--项目详情-计划详情-计划活动-->
<!--https://www.visactor.io/vtable/option/Gantt#taskBar.startDateField-->
<template>
  <div id="ganttContainer"></div>
</template>

<script setup>
import * as VTableGantt from '@visactor/vtable-gantt';
import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';

const route = useRoute();
const loading = ref(false);
// 注册编辑器到VTable
VTableGantt.VTable.register.editor('input', new InputEditor());
VTableGantt.VTable.register.editor('date', new DateInputEditor());
VTableGantt.VTable.register.editor('select', new ListEditor({ values: ['女', '男'] }));

onMounted(() => {
  getData();
});

/**
 * 获取表格数据
 * */
const getData = () => {
  loading.value = true;
  const params = {
    tableID: 'PIPlanActivitiesTable',
    oid: route.query.oid,
  };

  window.$api.projectListApi
    .findRefActivities(params)
    .then((res) => {
      const columns = res.data.columns.map((item, index) => ({
        ...item,
        field: item.prop,
        title: item.label,
        width: 'auto',
        sort: true,
        tree: !index,
        // editor: 'date',
      }));
      const records = res.data.rows;

      const option = {
        overscrollBehavior: 'none', //表格滚动到顶部/底部时，不再触发父容器滚动
        records,
        //左侧表格
        taskListTable: {
          columns,
          tableWidth: 1200,
          theme: {
            headerStyle: {
              borderColor: '#e1e4e8',
              borderLineWidth: 1,
              fontSize: 14,
              fontWeight: 'bold',
              bgColor: '#EEF1F5',
              // bgColor: 'var(--el-fill-color-light)',
            },
            bodyStyle: {
              borderColor: '#e1e4e8',
              borderLineWidth: [1, 0, 1, 0],
              fontSize: 16,
              color: '#4D4D4D',
              bgColor: '#FFF',
            },
          },
        },
        //甘特图
        frame: {
          verticalSplitLineMoveable: true, //表格 甘特图分割线
          outerFrameStyle: {
            borderLineWidth: 1,
            borderColor: '#e1e4e8',
            cornerRadius: 4,
          },
          verticalSplitLine: {
            lineColor: '#e1e4e8',
            lineWidth: 1,
          },
          horizontalSplitLine: {
            lineColor: '#e1e4e8',
            lineWidth: 1,
          },
        },
        //甘特图格子
        grid: {
          weekendBackgroundColor: '#f8f8f8',
          verticalLine: {
            lineWidth: 1,
            lineColor: '#e1e4e8',
          },
          horizontalLine: {
            lineWidth: 1,
            lineColor: '#e1e4e8',
          },
        },
        // headerRowHeight: 40,
        // rowHeight: 40,
        taskBar: {
          startDateField: 'act.targetStartDate',
          endDateField: 'act.targetEndDate',
          progressField: 'physicalCompletePercent',
          // resizable: false,
          moveable: true,
          hoverBarStyle: {
            barOverlayColor: 'rgba(99, 144, 0, 0.4)',
          },
          labelText: '{name} {physicalCompletePercent}%',
          labelTextStyle: {
            // padding: 2,
            fontFamily: 'Arial',
            fontSize: 16,
            textAlign: 'left',
            textOverflow: 'ellipsis',
          },
          barStyle: {
            width: 20,
            /** 任务条的颜色 */
            barColor: '#ee8800',
            /** 已完成部分任务条的颜色 */
            completedBarColor: '#91e8e0',
            /** 任务条的圆角 */
            cornerRadius: 8,
            /** 任务条的边框 */
            borderLineWidth: 1,
            /** 边框颜色 */
            borderColor: 'black',
          },
          //里程碑
          milestoneStyle: {
            borderColor: 'red',
            borderLineWidth: 1,
            fillColor: 'green',
            width: 15,
          },
        },
        timelineHeader: {
          colWidth: 50,
          backgroundColor: '#EEF1F5',
          horizontalLine: {
            lineWidth: 1,
            lineColor: '#e1e4e8',
          },
          verticalLine: {
            lineWidth: 1,
            lineColor: '#e1e4e8',
          },
          scales: [
            {
              unit: 'week',
              step: 1,
              rowHeight: 28,
              format(date) {
                return window.$fn.$timeFormat(date.startDate);
              },
              style: {
                fontSize: 14,
                // fontWeight: 'bold',
                // color: 'white',
                // strokeColor: 'black',
                // textBaseline: 'bottom',
                // backgroundColor: '#EEF1F5',
                // textStick: true,
                // padding: [0, 30, 0, 20]
              },
            },
            {
              unit: 'day',
              step: 1,
              rowHeight: 28,
              // format(date) {
              //   return window.$fn.$timeFormat(date.startDate, 'MM-DD');
              // },
              style: {
                fontSize: 14,
              },
            },
          ],
        },
        rowSeriesNumber: {
          width: 50,
          // dragOrder: true,//可否拖拽
          cellType: 'checkbox',
          enableTreeCheckbox: true,
        },
        // markLine: [
        //   {
        //     date: '2024-07-28',
        //     style: {
        //       lineWidth: 1,
        //       lineColor: 'blue',
        //       lineDash: [8, 4],
        //     },
        //   },
        //   {
        //     date: '2024-08-17',
        //     style: {
        //       lineWidth: 2,
        //       lineColor: 'red',
        //       lineDash: [8, 4],
        //     },
        //   },
        // ],
        scrollStyle: {
          scrollRailColor: 'RGBA(246,246,246,0.5)',
          visible: 'scrolling',
          // width: 6,
          scrollSliderCornerRadius: 2,
          // scrollSliderColor: '#5cb85c',
        },
      };
      const ganttInstance = new VTableGantt.Gantt(
        document.getElementById('ganttContainer'),
        option,
      );
      window['ganttInstance'] = ganttInstance;
    })
    .finally(() => {
      loading.value = false;
    });
};
</script>

<style scoped lang="less">
#ganttContainer {
  position: relative;
  min-height: 500px;
}
</style>
